<template>
    <div >
        <div class="comment">
            <div class="total"><span class='all-length'>{{commentLen}}</span>条网友点评</div>
            <div class="com-cont">
                <div class="list-comment" v-for="(comment,index) in list" :key="index">
                    <div class="c-header">
                        <div class="imgbox">
                            <img :src="comment.userAvatar" alt="">
                        </div>
                    </div>
                    <div class="c-info">
                        <div class="c-name">{{comment.userName}}</div>
                        <div class="date"><span>{{comment.time}}</span></div>
                        <div class="c-source">
                                <!-- v-model="value"                                 -->
                            <el-rate
                                :value="comment.mark"
                                disabled
                                show-score
                                text-color="#ff9900"
                            >
                            </el-rate>
                            <!-- {{comment.mark}} -->
                        </div>
                        <div class="c-desc">{{comment.comment}}</div>
                        <!-- 展示图片的地方 -->
                        <div class="comment-photo">
                            <div class="photo-box">
                                <div class="photo-list" v-for="(h,index) in comment.image" :key="index">
                                    <img :src="h" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="handle">
                            <div class="like-cont">
                                <i class='el-icon-star-off' @click='thumb(comment.commentId)' v-if="bool == false"></i>
                                <i class='el-icon-star-on' @click='thumb(comment.commentId)' v-if="bool" style="color:red;font-size:25px"></i>
                            </div>
                            <div class="c-reply" @click="reply(index,comment.commentId)"><i class='el-icon-chat-dot-round'></i></div>
                            <div class='c-delete' @click="omit(comment.commentId,comment.userId)" v-if="comment.userId == user"><i class='el-icon-delete'></i></div>
                        </div>
                        <!-- 点击回复会出现的内容 -->
                        <div class="reply-container" ref='reply' v-if="comment.show">
                            <!-- 主评论下的子评论 -->
                            <div class="reply-sonComment" v-for="(child,index) in childComment" :key="index">
                                <div class="sonComment">
                                    <div class="c-header">
                                        <div class="imgbox">
                                            <img :src="child.userAvatar" alt="头像" />
                                        </div>
                                    </div>
                                    <div class="c-info">
                                        <div class="c-name">{{child.userName}}回复{{child.fatherName}}</div>
                                        <div class="date"><span>{{child.time}}</span></div>
                                        <div class="c-desc">{{child.comment}}</div>
                                        <div class="handle-son">
                                            <!-- 删除的按钮 -->
                                            <div class="delete" @click="del(child.commentId,child.userId,child.rootId)" v-if="child.userId == user">
                                                <i class='el-icon-delete'></i>
                                            </div>
                                            <!-- 回复的按钮 -->
                                            <!-- @click="reply1( index,child.commentId)" -->
                                            <div class="delete" @click="replySon(index)"><i class='el-icon-chat-dot-round'></i></div>
                                        </div>
                                        <!-- 点击子评论的回复的按钮出现的弹窗 -->
                                        <div class="reply-item1" v-if="child.show">
                                            <textarea  cols="20" rows="10" class='reply-textarea1' v-model="sonNate"></textarea>
                                            <input type="button" value="提交" class='submit-btn1' @click="sonReplay(child.commentId,child.fatherId)">
                                        </div>
                                    </div>                                    
                                </div>
                                <div class="line"></div>
                            </div>                           
                            <div class="reply-item">
                                <textarea  cols="30" rows="10" class='reply-textarea' v-model="nate"></textarea>
                                <input type="button" value="提交" class='sumbit-btn' @click="revert(comment.commentId)">
                            </div>
                        </div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// import cookie from '../../cookie/index'
// import jwtDecode from 'jwt-decode'

import {comment1,showRoot,good,shallowReactive,replySon,delComment,thumbSon} from '../../../api/commonReq/front/cate/data'
export default {
    name:'CommentFood',
    data() {
        return {
            list:null,
            // listSon:null, 
            childComment:null,
            nate:'',
            sonNate:'',
            user:null,
            commentLen:null,
            bool:false,
            value:''
        }
    },
    mounted() {
        // this.showRoot();
        this.x.$on('hello',(data)=>{
            this.list = data.data
            this.commentLen = data.data.length
        }),
        this.user = this.$store.state.store.userMsg.userId
        //   this.user = jwtDecode(cookie.getToken()).userId
        //  this.x.$emit('hello',this.showRoot);
        // 遍历根评论
        showRoot({shopId:this.$route.params.id}).then(data=>{
            this.list = data.data.data
            this.commentLen = data.data.data.length
            this.value = data.data.data.mark
             // 遍历是否点过赞 
            for(let i=0;i<this.list.length;i++){ 
                good({commentId:this.list[i].commentId,userId:this.user}).then(data=>{
                    if(data.data.data == '该用户未点赞'){                          
                        this.bool = false                         
                    }else if(data.data.data == '该用户已点赞'){                            
                        this.bool = true                          
                    }  
                }) 
                .catch(error => {
                    console.log(error);
                })               
                    // this.$http({
                    //     url:'/shops/comment/getComment/likeState',
                    //     methods:'get',
                    //     headers:{
                    //         'Authorization':cookie.getToken()
                    //     },
                    //     params:{
                    //         commentId:this.list[i].commentId,
                    //         userId:this.user
                    //     }
                    // }) 
                    // .then(data => {
                    //     if(data.data.data == '该用户未点赞'){                          
                    //         this.bool = false                         
                    //     }else if(data.data.data == '该用户已点赞'){                            
                    //         this.bool = true                          
                    //     }                        
                    // })
                    // .catch(error => {
                    //     console.log(error);
                    // }) 
            }   
        })
        .catch(error => {
            console.log(error);
        })
    },
    watch:{
        list:{
            deep:true,
            handler(newValue){
                this.list = newValue
            },
        }
    },
    methods: { 
        // 点击主评论的回复会出现的内容
        reply(index,b){
            this.$set(this.list[index],"show",true)
            // this.list[index].show = true
            // 遍历根评论下的子评论
            comment1({
                commentId:b
            }).then(data=>{
                this.childComment = data.data.data   
            })
            .catch(error => {
                console.log(error);
            })
            // this.$http({
            //     url:'/shops/comment/getReply',
            //     methods:'get',
            //     headers:{
            //         'Authorization':cookie.getToken()
            //     },
            //     params:{
            //         commentId:b
            //     }
            // })
            // .then(data => {
            //     this.childComment = data.data.data   
            //     // this.listSon =data.data.data     
            // })
            // .catch(error => {
            //     console.log(error);
            // })
        },
        // 点击子评论的回复会出现的内容
        replySon(index){  
            this.$set(this.childComment[index],"show",true)
        },
        // 遍历根评论
        // showRoot(){
        //     this.$http({
        //         url:'/shops/comment/getComment/shop',
        //         methods:'get',
        //         headers:{
        //             'Authorization':cookie.getToken()
        //         },
        //         params:{
        //             shopId:this.$route.params.id
        //         }
        //     })
        //     .then(data => {
        //         this.list = data.data.data
        //         this.commentLen = data.data.data.length
        //         this.value = data.data.data.mark
        //         // 遍历是否点过赞   
        //         for(let i=0;i<this.list.length;i++){                 
        //             this.$http({
        //                 url:'/shops/comment/getComment/likeState',
        //                 methods:'get',
        //                 headers:{
        //                     'Authorization':cookie.getToken()
        //                 },
        //                 params:{
        //                     commentId:this.list[i].commentId,
        //                     userId:this.user
        //                 }
        //             }) 
        //             .then(data => {
        //                 if(data.data.data == '该用户未点赞'){                          
        //                     this.bool = false                         
        //                 }else if(data.data.data == '该用户已点赞'){                            
        //                     this.bool = true                          
        //                 }                        
        //             })
        //             .catch(error => {
        //                 console.log(error);
        //             }) 
        //         }                          
        //     })
        //     .catch(error => {
        //         console.log(error);
        //     })
        // },
        // 回复主评论 
        revert(c){   
            // const range = jwtDecode(cookie.getToken())
            if(this.nate == ''){
                this.$message({
                    message:'请输入评论内容',
                    type:'warning',
                    center:true
                })
            }else{
                shallowReactive({
                    comment:this.nate,
                    rootId:c,
                    userId:this.user
                }).then(data=>{
                    this.$message({
                        message:data.data.data,
                        type:'success',
                    })
                    this.nate='';
                    // 再次遍历评论
                    // this.$http({
                    //     url:'/shops/comment/getReply',
                    //     methods:'get',
                    //     headers:{
                    //         'Authorization':cookie.getToken()
                    //     },
                    //     params:{
                    //         commentId:c
                    //     }
                    // })
                    comment1({commentId:c}).then(data => {
                        this.childComment = data.data.data            
                    })
                    .catch(error => {
                        console.log(error);
                    })
                })
                .catch(error=>{
                    console.log(error);
                })
                // this.$http({
                //     url:'/shops/comment/reply',
                //     method:'post',
                //     headers:{
                //         'Authorization':cookie.getToken()
                //     },
                //     params:{
                //         comment:this.nate,
                //         rootId:c,
                //         userId:range.userId
                //     }
                // })
                // .then(data => {
                //     this.$message({
                //         message:data.data.data,
                //         type:'success',
                //     })
                //     this.nate='';
                //     // 再次遍历评论
                //     this.$http({
                //         url:'/shops/comment/getReply',
                //         methods:'get',
                //         headers:{
                //             'Authorization':cookie.getToken()
                //         },
                //         params:{
                //             commentId:c
                //         }
                //     })
                //     .then(data => {
                //         this.childComment = data.data.data            
                //     })
                //     .catch(error => {
                //         console.log(error);
                //     })
                //     // this.reply();
                // })
                // .catch(error => {
                //     console.log(error);
                // })
            }  
        }, 
        // 回复子评论  
         sonReplay(c,x){   
            // const range1 = jwtDecode(cookie.getToken())
            if(this.sonNate == ''){
                this.$message({
                    message:'请输入评论内容',
                    type:'warning',
                    center:true
                })
            }else{
                // this.$http({
                //     url:'/shops/comment/reply',
                //     method:'post',
                //     headers:{
                //         'Authorization':cookie.getToken()
                //     },
                //     params:{
                //         comment:this.sonNate,
                //         rootId:c,
                //         userId:range1.userId
                //     }
                // })
                shallowReactive({
                    comment:this.sonNate,
                    rootId:c,
                    userId:this.user
                })
                .then(data => {
                    this.$message({
                        message:data.data.data,
                        type:'success',
                    })
                    this.sonNate='';
                    // 再次遍历主评论下的子评论
                    // this.$http({
                    //     url:'/shops/comment/getReply',
                    //     methods:'get',
                    //     headers:{
                    //         'Authorization':cookie.getToken()
                    //     },
                    //     params:{
                    //         commentId:x
                    //     }
                    // })
                    replySon({commentId:x})
                    .then(data => {
                        this.childComment = data.data.data            
                    })
                    .catch(error => {
                        console.log(error);
                    })
                    // this.reply();
                })
                .catch(error => {
                    console.log(error);
                })
            }  
        }, 
        // 删除主评论  
        omit(s,q){
            this.$confirm('是否删除此评论？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // this.$http({
                //     url:'/shops/comment/delete',
                //     method:'delete',
                //     headers:{
                //         'Authorization':cookie.getToken()
                //     },
                //     params:{
                //         commentId:s,
                //         userId:q
                //     }
                // })
                delComment({
                    commentId:s,
                    userId:q
                })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    }); 
                    this.showRoot() 
                })
                .catch(error => {
                    console.log(error);
                })
            
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        
        // 删除子评论
        del(m,n,j){
            this.$confirm('是否删除此评论？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // this.$http({
                //     url:'/shops/comment/delete',
                //     method:'delete',
                //     headers:{
                //         'Authorization':cookie.getToken()
                //     },
                //     params:{
                //         commentId:m,
                //         userId:n
                //     }
                // })
                delComment({
                    commentId:m,
                    userId:n
                })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    }); 
                    // 再次遍历根评论下的子评论
                    // this.$http({
                    //     url:'/shops/comment/getReply',
                    //     methods:'get',
                    //     headers:{
                    //         'Authorization':cookie.getToken()
                    //     },
                    //     params:{
                    //         commentId:j
                    //     }
                    // })
                    replySon({
                        commentId:j
                    })
                    .then(data => {
                        this.childComment = data.data.data       
                    })
                    .catch(error => {
                        console.log(error);
                    })
                })
                .catch(error => {
                    console.log(error);
                })
            
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 点赞主评论
        thumb(w){
            // this.$http({
            //     url:'/shops/comment/comment/like',
            //     method:'post',
            //     headers:{
            //         'Authorization':cookie.getToken()
            //     },
            //     params:{
            //         commentId:w,
            //         userId:this.user
            //     }
            // })
            thumbSon({
                commentId:w,
                userId:this.user
            })
            .then(data => {
                if(data.data.code == 200){
                    this.$message({
                        message:data.data.data,
                        type:'success',
                    })
                     showRoot({shopId:this.$route.params.id}).then(data=>{
                        this.list = data.data.data
                        this.commentLen = data.data.data.length
                        this.value = data.data.data.mark
                        // 遍历是否点过赞 
                        for(let i=0;i<this.list.length;i++){ 
                            good({commentId:this.list[i].commentId,userId:this.user}).then(data=>{
                                if(data.data.data == '该用户未点赞'){                          
                                    this.bool = false                         
                                }else if(data.data.data == '该用户已点赞'){                            
                                    this.bool = true                          
                                }  
                            }) 
                            .catch(error => {
                                console.log(error);
                            })               
                        }   
                    })
                    .catch(error => {
                        console.log(error);
                    })
                    // this.showRoot();
                    // 如果点赞成功就进行遍历是否点赞
                    // this.$http({
                    //     url:'/shops/comment/getComment/likeState',
                    //     method:'get',
                    //     headers:{
                    //         'Authorization':cookie.getToken()
                    //     },
                    //     params:{
                    //         commentId:w,
                    //         userId:this.user
                    //     }
                    // }) 
                    // .then(data => {
                    //     console.log(data.data.data);
                    //     console.log(357357357357);
                    //     if(data.data.data == '该用户未点赞'){                          
                    //         this.bool = false
                           
                    //     }else if(data.data.data == '该用户已点赞'){                            
                    //         this.bool = true
                            
                    //     }                        
                    // })
                    // .catch(error => {
                    //     console.log(error);
                    // }) 
                }else{
                    this.$message({
                        message:data.data.data,
                        type:'warning',
                        center:true
                    })
                }          
            })
            .catch(error => {
                console.log(error);
            })
        }
    },
}
</script>
<style lang="less">
    .comment{
        margin: 40px 36px 25px 36px;
        width: 80%;
        .total{
            font-size: 20px;
            line-height: 26px;
        }
        .com-cont{
            margin-top: 8px;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 0 20px 40px 20px;
            color: #666;
            display: flex;
            flex-direction: column;
            .reply-sonComment{     
                .line{
                    margin: 0 auto;
                    width: 90%;
                    margin-top: 15px;
                    height: 1px;
                    overflow: hidden;
                    border-bottom: 1px solid #e5e5e5;
                }
            }
            .list-comment,.sonComment{
                padding: 30px 0 0 10px;
                display: flex;
              
                .c-header{
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    float: left;
                    background-color: gainsboro;
                    .imgbox{
                        width: 100%;
                        height: 100%;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                    
                }
                .c-info{
                     width: 85%;
                     padding-left: 20px;
                     .c-name{
                        font-size: 16px;
                        color: #222;
                        line-height: 22px;
                        margin-bottom: 1px;
                     }
                     .date{
                        font-size: 12px;
                        line-height: 20px;
                        color: #999;
                        span{
                            float: right;
                        }
                     }
                     .c-source{
                        line-height: 14px;
                        margin-top: 3px;
                        height: 16px;
                        font-size: 11px;
                     }
                     .c-desc{
                        font-size: 14px;
                        line-height: 20px;
                        padding-top: 13px;
                     }
                     .handle-son{
                         display: flex;
                         .delete{
                            font-size: 14px;
                            line-height: 20px;
                            padding-top: 13px;
                            padding-right: 10px;
                         }
                     }
                    //  展示图片的地方
                    .comment-photo{
                        padding: 7px 0 0;
                        position: relative;
                        overflow: hidden;
                        .photo-box{
                            width: 100%;
                            display: flex;
                            .photo-list{
                                
                                img{
                                    width: 140px;
                                    height: 140px;
                                    margin: 10px;
                                    border-radius: 4px;
                                    background-color: #f4f4f4;
                                }
                            }
                        }
                    }
                     .handle{
                          margin: 17px 0 16px 0;
                          display: flex;
                     }
                    .like-cont{
                        // text-align: right;
                        margin-right:14px ;
                        font-size: 20px;
                        color: #666;
                        cursor: pointer;
                        // .like{
                        //     outline: none;
                        //     background: transparent;
                        //      cursor: pointer;
                        //     font-size: 12px;
                        //     color: #666;
                        // }
                    }
                    .c-reply{
                        // text-align: right;
                        font-size: 20px;
                        color: #666;
                        cursor: pointer;
                        margin-right: 14px;
                    }
                    .c-delete{
                        font-size: 18px;
                        color: #666;
                        cursor: pointer;
                    }
                    .reply-item1{
                            margin: 20px;
                            padding-bottom: 12px;
                            .reply-textarea1{
                                width: 100%;
                                height: 55px;
                                resize: none;
                                margin-bottom: 10px;
                                padding: 10px;
                                box-sizing: border-box;
                                border-radius: 4px;
                                border-color: #E5E5E5;
                            }
                            .submit-btn1{
                                background-color: #FF9900;
                                border-radius: 100px;
                                color: #fff;
                                cursor: pointer;
                                font-size: 12px;
                                float: right;
                                padding: 7px 17px;
                                border-radius: 100px;
                                border: none;
                            }
                        }
                    .line{
                        height: 1px;
                        overflow: hidden;
                        border-bottom: 1px solid #e5e5e5;
                    }
                    // 回复评论
                    .reply-container{ 
                        margin-bottom: 30px;
                        margin-top: 16px;
                        padding: 10px 0 20px;
                        background-color: #FAFAFA;
                        border-radius: 4px;
                        .reply-item{
                            margin: 20px  30px;
                            padding-bottom: 20px;
                            .reply-textarea{
                                width: 100%;
                                height: 80px;
                                resize: none;
                                margin-bottom: 10px;
                                padding: 10px;
                                box-sizing: border-box;
                                border-radius: 4px;
                                border-color: #E5E5E5;
                            }
                            .sumbit-btn{
                                background-color: #FF9900;
                                border-radius: 100px;
                                color: #fff;
                                cursor: pointer;
                                font-size: 12px;
                                float: right;
                                padding: 7px 28px;
                                border-radius: 100px;
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
</style>